<template>
  <div class="container">
    <div class="top">
      <el-card>
        <!-- 查询条件 -->
        <el-form ref="queryFormRef" :model="queryForm" label-width="100px">
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="模板名称：" prop="tempName">
                <el-input v-model="queryForm.tempName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <div class="btns">
                  <el-button @click="resetForm" type="primary" plain>重置</el-button>
                  <!-- <el-button @click="openAddDialog()" type="primary">新增</el-button> -->
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!-- 表格 -->
    <div class="middle">
      <el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" style="width: 100%">
        <el-table-column label="模板名称" prop="tempName" width="250"></el-table-column>
        <el-table-column label="脚本路径" prop="tempNote" width="250"></el-table-column>
        <el-table-column label="类型" prop="state" width="80"></el-table-column>
        <el-table-column label="执行时间" prop="resTime" width="160"></el-table-column>
        <el-table-column prop="sy" label="是否应用" width="80"> </el-table-column>
        <el-table-column label="日志" prop="rz"></el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="check(scope.row.id)" size="small" plain>查看/编辑</el-button>
            <el-button type="danger" @click="del(scope.row.id)" size="small" plain>删除</el-button>
            <el-button type="success" v-if="scope.row.state !== '0'" @click="enable(scope.row.id)" size="small" plain>启用</el-button>
            <el-button type="primary"  size="mini" @click="application(scope.row.id)">对象应用</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 修改dialog -->
    <el-dialog title="合规检查模板"
               :visible.sync="checkFormVisible"
               :close-on-click-modal="false">
      <el-form ref="checkFormRef" :model="checkForm" label-width="100px">
        <div class="msg">基本信息：</div>
        <el-form-item label="模板名称：" prop="tempName">
          <el-input v-model="checkForm.tempName"></el-input>
        </el-form-item>
        <el-form-item label="模板描述：" prop="tempNote">
          <el-input v-model="checkForm.tempNote"></el-input>
        </el-form-item>
        <div class="msg">硬件系统：</div>
        <el-form-item label="CentOS版本：" prop="centosVer">
          <el-input v-model="checkForm.centosVer"></el-input>
        </el-form-item>
        <el-form-item label="Windows版本：" prop="winVer">
          <el-input v-model="checkForm.winVer"></el-input>
        </el-form-item>
        <el-form-item label="磁盘可用空间大小：" prop="disk">
          <el-input v-model="checkForm.disk"><template slot="append">GB</template></el-input>
        </el-form-item>
        <el-form-item label="内存大小：" prop="mer">
          <el-input v-model="checkForm.mem"><template slot="append">GB</template></el-input>
        </el-form-item>
        <el-form-item label="网卡个数：" prop="ethNum">
          <el-input v-model="checkForm.ethNum"></el-input>
        </el-form-item>
        <div class="msg">软件应用：</div>
        <el-form-item label="响应时间：" prop="resTime">
          <el-input v-model="checkForm.resTime"></el-input>
        </el-form-item>
        <el-form-item label="吞吐量：" prop="throughput">
          <el-input v-model="checkForm.throughput"><template slot="append">/s</template></el-input>
        </el-form-item>
        <el-form-item label="资源利用率：" prop="utilization">
          <el-input v-model="checkForm.utilization"><template slot="append">%</template></el-input>
        </el-form-item>
        <el-form-item label="并发量：" prop="concurrency">
          <el-input v-model="checkForm.concurrency"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" >
        <el-button @click="checkFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update()">修 改</el-button>
      </div>
    </el-dialog>
    <!-- 新增dialog -->
    <el-dialog title="合规检查模板"
               :visible.sync="addFormVisible"
               :close-on-click-modal="false">
      <el-form ref="addFormRef" :model="addForm" label-width="100px">
        <div class="msg">基本信息：</div>
        <el-form-item label="模板名称：" prop="tempName">
          <el-input v-model="addForm.tempName"></el-input>
        </el-form-item>
        <el-form-item label="模板描述：" prop="tempNote">
          <el-input v-model="addForm.tempNote"></el-input>
        </el-form-item>
        <div class="msg">硬件系统：</div>
        <el-form-item label="CentOS版本：" prop="centosVer">
          <el-input v-model="addForm.centosVer"></el-input>
        </el-form-item>
        <el-form-item label="Windows版本：" prop="winVer">
          <el-input v-model="addForm.winVer"></el-input>
        </el-form-item>
        <el-form-item label="磁盘可用空间大小：" prop="disk">
          <el-input v-model="addForm.disk"><template slot="append">GB</template></el-input>
        </el-form-item>
        <el-form-item label="内存大小：" prop="mer">
          <el-input v-model="addForm.mem"><template slot="append">GB</template></el-input>
        </el-form-item>
        <el-form-item label="网卡个数：" prop="ethNum">
          <el-input v-model="addForm.ethNum"></el-input>
        </el-form-item>
        <div class="msg">软件应用：</div>
        <el-form-item label="响应时间：" prop="resTime">
          <el-input v-model="addForm.resTime"></el-input>
        </el-form-item>
        <el-form-item label="吞吐量：" prop="throughput">
          <el-input v-model="addForm.throughput"><template slot="append">/s</template></el-input>
        </el-form-item>
        <el-form-item label="资源利用率：" prop="utilization">
          <el-input v-model="addForm.utilization"><template slot="append">%</template></el-input>
        </el-form-item>
        <el-form-item label="并发量：" prop="concurrency">
          <el-input v-model="addForm.concurrency"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" >
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">新 增</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  window._interceptConfig = {
    collection: true, //整体开关
    click: true, //页面点击事件信息采集开关
    page: true, //页面跳转加载事件信息采集开关
    error: true, //异常信息采集开关
    http: true, //通讯信息采集开关
    name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
    url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
  };
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
  import { queryComTemplate, deleteComTemplate, updateComTemplate, addComTemplate, enableComTemplate,enableComTemplate2 } from "@/api/system/devops"
  export default {
    name: 'Hisreport',
    data() {
      return {
        // 表格数据
        tableData: null,
        // 查询参数
        queryForm: {
          tempName: ""
        },
        // 修改dialog显示与否
        checkFormVisible: false,
        checkForm: {
          id: "",
          tempName: "",
          tempNote: "",
          state: "",
          centosVer: "",
          winVer: "",
          disk: "",
          mem: "",
          ethNum: "",
          resTime: "",
          throughput: "",
          utilization: "",
          concurrency: "",
          isdelete: "",
        },
        // 新增dialog显示与否
        addFormVisible: false,
        addForm: {
          tempName: "",
          tempNote: "",
          state: "",
          centosVer: "",
          winVer: "",
          disk: "",
          mem: "",
          ethNum: "",
          resTime: "",
          throughput: "",
          utilization: "",
          concurrency: "",
          isdelete: "",
        }
      }
    },
    methods: {
      application(id){
        this.$confirm('是否应用对象', '对象应用', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          enableComTemplate2(id).then(res=> {
            this.$message({
              type: 'success',
              message: '启用成功'
            })
            // 回显
            this.initData()
          })
        });
      },
      // 加载数据
      initData() {
        queryComTemplate("",this.queryForm.tempName).then(response => {
          this.tableData = response.data
        })
      },
      // 重置表单
      resetForm(){
        this.$refs.queryFormRef.resetFields()
      },
      // 返回状态
      getState(code) {
        if (code === '0') {
          return '启用'
        } else {
          return '停用'
        }
      },
      // 查看/编辑
      check(id) {
        this.checkFormVisible = true
        queryComTemplate(id,"").then(response => {
          this.checkForm = response.data[0]
        })
      },
      // 删除
      del(id) {
        this.$confirm('确定要删除此数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteComTemplate(id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            // 回显
            this.initData()
          })
        })
      },
      // 修改
      update() {
        this.$confirm('是否保存修改?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateComTemplate(this.checkForm).then(res => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.checkFormVisible = false
            // 回显
            this.initData()
          })
        })
      },
      // 新增dialog
      openAddDialog() {

        this.addFormVisible = true


      },
      // 新增
      add() {
        addComTemplate(this.addForm).then(res=> {
          this.$message({
            type: 'success',
            message: '新增成功'
          })
          this.addForm=  {
            tempName: "",
            tempNote: "",
            state: "",
            centosVer: "",
            winVer: "",
            disk: "",
            mem: "",
            ethNum: "",
            resTime: "",
            throughput: "",
            utilization: "",
            concurrency: "",
            isdelete: "",
          }

          this.addFormVisible = false
          // 回显
          this.initData()

        })
      },
      // 启用
      enable(id) {
        this.$confirm('启用模板将停用其他模板，是否确认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          enableComTemplate(id).then(res=> {
            this.$message({
              type: 'success',
              message: '启用成功'
            })
            // 回显
            this.initData()
          })
        })
      }
    },
    mounted() {
      this.initData()
    },
    watch:{
      //侦听queryForm
      queryForm:{
        deep: true,
        handler(newValue,oldValue){
          this.initData()
        }
      }
    }
  }

</script>

<style>
  .msg {
    font-size: 16px;
    font-weight: bold;
    color: black;
    margin: 20px 0;
  }
  .btns {
    display: flex;
    flex-direction: row;
  }
  .middle {
    margin: 10px;
    width: 100%;
  }
</style>
